<!DOCTYPE html>
<html lang="zh-CN">

<head>


    <title>文件上传</title>

    <meta charset="UTF-8">


    <!--<script type="text/javascript" src="../static/jquery-3.3.1.min.js"></script>-->
    <!--<script type="text/javascript" th:src="@{/jquery-3.3.1.min.js}"></script>-->

</head>
<body>
<div style="padding: 0">
    <div>
        <div>
            <form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
                  action="javascript: uploadAndSubmit();">
                <p>选择文件来上传 <input type="file" name="file"/></p>
                <p>输入上传路径，为空则默认在项目files目录下 <input type="text" id="path" name="path"/></p>
                <p><input type="submit" value="上传"/></p>
            </form>
        </div>
        <div>上传进度 (字节数):
            <span id="bytesRead"></span> / <span id="bytesTotal"></span>
        </div>

        <br>
        <br>

        <div>
            <span id="result"></span>
        </div>

    </div>

</div>

<script type="text/javascript">


    function uploadAndSubmit() {
        let form = document.forms["demoForm"];
        if (form["file"].files.length > 0) {
            let file = form["file"].files[0];

            let reader = new FileReader();
            reader.onloadstart = function () {
                console.log("onloadstart");
                document.getElementById("bytesTotal").textContent = file.size;
            };
            reader.onprogress = function (p) {
                console.log("onprogress");
                document.getElementById("bytesRead").textContent = p.loaded;
            };
            reader.onload = function () {
                console.log("load complete");
            };

            reader.onloadend = function () {
                // 在读取结束后，无论成功或者失败都会触发
                if (reader.error) {
                    console.log(reader.error);
                } else {
                    document.getElementById("bytesRead").textContent = file.size;
// 构造 XMLHttpRequest 对象，发送文件 Binary 数据
                    var xhr = new XMLHttpRequest();
                    let formData = new FormData();
                    formData.append("file", file);
                    formData.append("name", file.name);
                    formData.append("path", document.getElementById("path").value);
                    xhr.open(/* method */ "POST",
                        /* target url */ "/fileos/file/upload-file"
                        /*, async, default to true */);
                    xhr.overrideMimeType("multipart/form-data");
                    xhr.send(formData);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4) {
                            if (xhr.status === 200) {
                                console.log("upload complete");
                                let resp = xhr.responseText;
                                console.log("response: " + resp);
                                document.getElementById("result").innerText = resp;
                            }
                        }
                    }
                }
            };
            reader.readAsBinaryString(file);
        } else {
            alert("请先选择一个文件");
        }
    }

    XMLHttpRequest.prototype.sendAsBinary = function (datastr) {
        function byteValue(x) {
            return x.charCodeAt(0) & 0xff;
        }

        var ords = Array.prototype.map.call(datastr, byteValue);
        var ui8a = new Uint8Array(ords);
        this.send(ui8a.buffer);
    }

</script>
</body>
</html>